<template>
  <view class="personal-center">
    <view class="personal-list">
      <!-- 老人信息卡片 -->
      <view class="card-header" @tap="editProfile">
        <view class="avatar-section">
          <view class="avatar">
            <image class="avatar-img" src="/static/avatar.svg" mode="aspectFill"></image>
          </view>
          <view class="name-section">
            <view class="name-row">
              <text class="name">{{ userInfo.name || '无' }}</text>
              <text class="room-tag">康养中心2#1203</text>
            </view>
            <text class="address">康养中心养老院-合肥蜀山片区</text>
          </view>
        </view>
        <view class="arrow">
          <text class="arrow-icon">›</text>
        </view>
      </view>

      <!-- 基本信息网格 -->
      <view class="info-grid">
        <view class="info-row">
          <view class="info-item">
            <text class="info-label">性别</text>
            <text class="info-value">{{ userInfo.sex === 0 ? '女' : '男' || '无' }}</text>

          </view>
          <view class="info-item">
            <text class="info-label">年纪</text>
            <text class="info-value">{{ calculateAge(userInfo.birthday) || '无' }}</text>

          </view>
          <view class="info-item">
            <text class="info-label">身份证号</text>
            <text class="info-value">{{ userInfo.id_num || '无' }}</text>
          </view>
        </view>
        <view class="info-row">
          <view class="info-item">
            <text class="info-label">籍贯</text>
            <text class="info-value">{{ userInfo.province || '无' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">婚姻状况</text>
            <text class="info-value">{{ getMaritalStatus(userInfo.marray) || '无' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">既往病史</text>
            <text class="info-value">{{ userInfo.history || '无' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">过敏史</text>
            <text class="info-value">{{ userInfo.mi_history || '无' }}</text>
          </view>
        </view>
      </view>

      <!-- 详细信息列表 -->
      <view class="detail-list">
        <view class="detail-item">
          <text class="detail-label">姓名</text>
          <text class="detail-value">{{ userInfo.name || '无' }}</text>

        </view>

        <view class="detail-item">
          <text class="detail-label">联系方式</text>
          <text class="detail-value">{{ userInfo.phone || '无' }}</text>

        </view>

        <view class="detail-item">
          <text class="detail-label">家庭住址</text>
          <text class="detail-value">深圳市南山区招商蛇口自贸区20#2041</text>
        </view>

        <view class="detail-item">
          <text class="detail-label">工作单位</text>
          <text class="detail-value">{{ userInfo.part || '无' }}</text>

        </view>

        <view class="detail-item">
          <text class="detail-label">入驻状态</text>
          <text class="detail-value">{{ userInfo.status == 0 ? '未入驻' : userInfo.status == 1 ? '已入驻' : '已出院' }}</text>


        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  apiGetUserList
} from '@/request/api.js';
export default {
  name: 'PersonalCenter',
  data() {
    return {
      userInfo: {}
    }
  },
  onLoad() {
    this.getUserInfo()
  },
  methods: {
    async getUserInfo() {
      const res = await apiGetUserList({
        uid: 1
      })
      this.userInfo = res.data.info
    },
    // 编辑个人资料
    editProfile() {
      uni.navigateTo({
        url: '/pages/userInfo/index'
      });
    },
    // 计算年龄
    calculateAge(birthday) {
      if (!birthday || birthday === '0000-00-00') return '未知';
      const birth = new Date(birthday);
      const today = new Date();
      let age = today.getFullYear() - birth.getFullYear();
      const monthDiff = today.getMonth() - birth.getMonth();
      if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
        age--;
      }
      return age > 0 ? age.toString() : '未知';
    },

    // 获取婚姻状况
    getMaritalStatus(marray) {
      switch (marray) {
        case 1: return '未婚';
        case 2: return '已婚';
        case 3: return '离异';
        case 4: return '丧偶';
        default: return '未知';
      }
    },

  }
}
</script>

<style lang="scss" scoped>
.personal-center {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
  background-image: url('/static/top_bj.png');
  background-size: 100% 39%;
  background-repeat: no-repeat;
}

.personal-list {
  padding: 20rpx;
}

/* 页面标题 */
.header {
  background-color: #ffffff;
  padding: 30rpx;
  text-align: left;
  border-bottom: 1rpx solid #f0f0f0;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #000000;
}

/* 老人信息卡片 */
.elderly-card {
  background-color: #ffffff;
  margin: 20rpx;
  border-radius: 15rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  padding: 0 30rpx;
}

.avatar-section {
  display: flex;
  align-items: center;
  gap: 20rpx;
  flex: 1;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 30rpx;
  border: 4rpx solid #FF6B6B;
}

.avatar-img {
  width: 100%;
  height: 100%;
}

.name-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}

.name-row {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
  width: 100%;
}

.name {
  font-size: 36rpx;
  color: #000000;
  font-weight: bold;
  margin-right: 15rpx;
}

.room-tag {
  background-color: #FFF2F0;
  padding: 5rpx 15rpx;
  border-radius: 15rpx;
  font-size: 24rpx;
  color: #FF4D4F;
}

.address {
  font-size: 26rpx;
  color: #666666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.address {
  font-size: 24rpx;
  color: #666666;
}

.arrow {
  padding: 10rpx;
}

.arrow-icon {
  font-size: 40rpx;
  color: #cccccc;
}

/* 信息网格 */
.info-grid {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
  background-color: #ffffff;
  margin: 20rpx;
  border-radius: 15rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.info-row {
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
}

.info-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.info-label {
  font-size: 24rpx;
  color: #999999;
  margin-bottom: 10rpx;
  display: block;
}

.info-value {
  font-size: 28rpx;
  color: #000000;
  font-weight: 500;
  display: block;
}

/* 详细信息列表 */
.detail-list {
  background-color: #ffffff;
  margin: 20rpx;
  border-radius: 15rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40rpx 30rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-label {
  font-size: 32rpx;
  color: #000000;
  font-weight: 500;
}

.detail-value {
  font-size: 32rpx;
  color: #000000;
  text-align: right;
  max-width: 400rpx;
  word-wrap: break-word;
}

/* 底部导航栏 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  display: flex;
  padding: 20rpx 0;
  border-top: 1rpx solid #f0f0f0;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.nav-item {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rpx;
}

.nav-icon {
  font-size: 40rpx;
  color: #4D4D4D;
}

.nav-text {
  font-size: 24rpx;
  color: #4D4D4D;
}

.nav-item.active .nav-icon,
.nav-item.active .nav-text {
  color: #FF6B6B;
}

/* 响应式适配 */
@media (max-width: 750rpx) {
  .info-row {
    flex-wrap: wrap;
  }

  .info-item {
    min-width: 120rpx;
  }

  .detail-value {
    max-width: 300rpx;
  }
}
</style>